import * as echart from 'echarts';

import * as React from 'react';

class Line extends React.PureComponent<any, any> {
    private option: any;
    private myechart: echart.ECharts;
    private box: any;
    constructor(props: any) {
        super(props);
        const { title, data, seriesName } = this.props;
        this.option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: (params) => {
                    params = params[0];
                    let date = new Date(params.name);
                    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: seriesName,
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data
            }]
        };

    }
    public render() {
        const { height } = this.props;
        return (
            <div ref={node => this.box = node} style={{ height, width: 1200 }} />
        );
    }
    public setData(data: any) {
        this.option.series[0].data = data;
        this.myechart.setOption(this.option);
    }

    public componentDidMount() {
        this.myechart = echart.init(this.box);
        this.myechart.setOption(this.option);
    }
}

export default Line;
